<template>
  <div>
    <template v-for="oneMenus in menus">
      <el-submenu
        name="带有子菜单的菜单"
        v-if="oneMenus.children.length>0"
        :key="oneMenus.id"
        :index="oneMenus.menuName"
        :class="isCollapse?'is-collapse':'collapse'"
      >
        <template slot="title">
          <a-icon :type="oneMenus.menuIcon"></a-icon>
          <span>{{oneMenus.menuName}}</span>
        </template>
        <n-SubMenu
          :menus="oneMenus.children"
          @executeRouter="executeRouter"
        ></n-SubMenu>
      </el-submenu>
      <el-menu-item
        name="没有子菜单的菜单"
        v-else
        @click="executeRouter(oneMenus)"
        :index="oneMenus.menuName"
        :key="oneMenus.id"
        :class="isCollapse?'is-collapse':'collapse'"
      >
        <a-icon :type="oneMenus.menuIcon"></a-icon>
        <span slot="title">{{oneMenus.menuName}}</span>
      </el-menu-item>
    </template>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  name: 'nSubMenu',
  props: {
    menus: {
      type: Array,
      default: function () {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      isCollapse: 'getSideBarStatus' // 侧边栏是否默认收起
    })
  },
  methods: {
    executeRouter(menu) {
      this.$emit('executeRouter', menu);
    }
  }
};
</script>
